
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/include.js"></script>
    <script src="../js/getParameter.js"></script>
    <script type="text/javascript" src="../js/perfect-scrollbar.min.js"></script>
    <script type="text/javascript" src="../js/main.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../myjs/musicList.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../css/style.min.css" rel="stylesheet">

    <script>
        $(function (){
            $.post("/music/music/rankByComments",{},function (data)   {
                if (data!=null){
                    //获取tbody
                    //拼接
                    var trlist = '';
                    for (var i = 0; i < data.length; i++) {
                        var tr ="<tr>" +
                            //编号
                            "       <td>"+(i+1)+"</td>" +
                            //歌名
                            '<td>' + '<a href="musicInfo.html?mid='+data[i].music.mid+'">'+data[i].music.musicname+'</a>' + '</td>' +
                            //歌手
                            "       <td>"+data[i].singer.singername+"</td>" +
                            "                        <td>\n" +
                            "                            <div class=\"btn-group\">\n" +
                            "                                <a class=\"btn btn-xs btn-default\" onclick='insertMusic(" + data[i].music.mid + ")' href=\"#\" title=\"播放\" data-toggle=\"tooltip\"\n" +
                            "                                   data-original-title=\"播放\">\n" +
                            "                                    <i class=\"mdi mdi-arrow-right-drop-circle-outline\"></i>\n" +
                            "                                </a>\n" +
                            "                        </td>\n" +
                            "</tr>"
                        trlist += tr;
                    }
                    //2.3 将liList添加到ul中
                    $("#tbody").html(trlist);
                }
            },"json");
        });
        function playMusic(mid){
            $.post(
                "/music/music/findMusicsByMid",{mid:mid},function (data){
                    clickmusicplay_pause();
                    console.log("../"+data.musicpath)
                    $("#musicaudio").attr("src","../"+data.musicpath);
                    $("#musicnameaudio").html(data.musicname);
                }
            )
        }
        function clickmusicplay_pause(){
            $('#audioPlay').attr('src', '../images/pause2.png');
            // 开始播放当前点击的音频
            audio.load();
            audio.play();

            audio.oncanplay=function (){
                $('#totalTime').html(transTime(audio.duration))
            }


        }
    </script>
</head>
<body>
<div id="header">

</div>
<div id="audio">

</div>
<table class="table table-bordered">
    <thead>
    <tr>
        <th>编号</th>
        <th>歌名</th>
        <th>歌手</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody"></tbody>
</table>
<div id="footer"></div>
</body>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/main.min.js"></script>

</html>